<template>
  <div class="p-[20px] max-w-[80vw] overflow-y-auto">
    <el-button size="small" @click="editItem('add')">新增</el-button>
    <el-button size="small" @click="deleteItem">删除</el-button>

    <el-table
      class="mt-[20px]"
      max-height="800"
      :header-cell-class-name="'!bg-[#212121]'"
      :cell-class-name="'!bg-[#212121]'"
      :data="tableData"
      border
      empty-text="暂无数据"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column label="序号" fixed width="60" align="center">
        <template #default="scope">
          <span>{{ scope.$index + (query.current - 1) * query.size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="serviceName"
        label="数据源名称"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="serviceUrl"
        label="服务地址"
        show-overflow-tooltip
      />
      <el-table-column prop="tokenVal" label="token" show-overflow-tooltip />
      <el-table-column
        prop="tokenUrl"
        label="token_url"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column label="Operations" fixed="right" width="100">
        <template #default="scope">
          <el-button link size="small" @click="editItem('edit', scope.row.id)">
            编辑
          </el-button>
          <el-button link size="small" @click="deleteSingle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="fixed bottom-[10px] right-[50px]">
      <el-pagination
        v-model:page-size="query.size"
        v-model:current-page="query.current"
        layout="sizes , prev, pager , next ,total"
        :total="total"
        @change="changePagination"
      />
    </div>
    <DataSourceDialog ref="dialog" @close="getList()" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import DataSourceDialog from "@renderer/components/dataSource/index.vue";
import { getDataSourceList, deleteDataSource } from "@renderer/api/dataSource";
let props = defineProps({
  searchVal: {
    type: String,
    default: "",
  },
});

watch(
  () => props.searchVal,
  () => {
    query.serviceName = props.searchVal;
    getList();
  }
);
let dialog = ref(null);
let multipleSelection = ref([]);
let total = ref(0);
let tableData = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const deleteItem = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error("请选择要删除的数据源");
    return;
  }
  ElMessageBox.confirm(
    "删除数据源会对绑定该数据源的大屏组件造成影响，确定删除吗？",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      deleteDataSource(multipleSelection.value.map((item) => item.id)).then(
        (res: any) => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            getList();
          } else {
            ElMessage.error(res.msg);
          }
        }
      );
    })
    .catch(() => {});
};
const deleteSingle = (id) => {
  ElMessageBox.confirm(
    "删除数据源会对绑定该数据源的大屏组件造成影响，确定删除吗？",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      deleteDataSource([id]).then((res: any) => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          getList();
        } else {
          ElMessage.error(res.msg);
        }
      });
    })
    .catch(() => {});
};
const changePagination = (currentPage: number, pageSize: number) => {
  query.size = pageSize;
  query.current = currentPage;
  getList();
};
onMounted(() => {
  getList();
});
let query = reactive({
  serviceName: "",
  size: 20,
  current: 1,
});
const getList = async () => {
  let res: any = await getDataSourceList(query);
  if (res.code == 200) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  } else {
    ElMessage.error(res.msg);
  }
};
const editItem = (type, id?) => {
  dialog.value.type = type;

  dialog.value.init(type, id);
  dialog.value.dialogVisible = true;
};
</script>

<style scoped lang="scss"></style>
